<style>
    #info-dialog{
        position: fixed;
        width: 55vw;
        height: 55vh;
        top: calc((100vh - 55vh) / 3);
        left: calc((100vw - 55vw) / 2);
        box-sizing: border-box;
        box-shadow: 1px 2px 3px 1px rgba(10,10,10,.2);
        overflow: hidden;
        border-radius: 1vh;

        -webkit-animation: showing .5s linear;
        -moz-animation: showing .5s linear;
        animation: showing .5s linear;
    }
    .source-photo{
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        box-shadow: 1px 0 3px 0 rgba(0, 0, 0,.1);
    }
    .source-photo>img{
        width: 100%;
        height: 100%;
    }
    .name,.profession,.linked{
        position: absolute;
        width: 25%;
        left: 72%;
        overflow: auto;
    }
    .name{
        top: 5%;
    }
    .profession{
        top: 25%;
        margin-top: 5%;
    }
    .linked{
        bottom: 15%;
    }
    .linked a{
        color: black;
    }
    .linked a:hover{
        color: red;
    }
    .linked a:active{
        color: rebeccapurple;
    }
    .name>span,.profession>span,.linked>span{
        text-decoration: underline;
    }
    
    @keyframes showing{
        from{top: -50vh;}
        to{top: calc((100vh - 55vh) / 3);}
    }
</style>
<!--<div id='info-dialog'>
    <div class='source-photo'><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494232648049&di=c9ed0728dcd2a938f7d192092167d687&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3Dd2a25cef858ba61edfeec827713597cc%2F6e73c60735fae6cd181ef14408b30f2443a70fc1.jpg"></div>
    <div class='name'>名字： <span>Name</span></div>
    <div class='profession'>职业： <span>Profession</span></div>
    <div class='linked'>链接： <span><a href="Linked">点击</a></span></div>
</div>-->
<body>
    
</body>

<script>
    // 展示信息面板函数
    function show_info(infos){
        if(!infos || !(infos instanceof Object)) return;

        var basic = "<div id='info-dialog'><div class='source-photo'><img src=SourceImage></div><div class='name'>名字： <span>Name</span></div><div class='profession'>职业： <span>Profession</span></div><div class='linked'>链接： <span><a href='Linkin' target='_blank'>点击</a></span></div></div>",
            frame = document.createElement('div'),
            dialog;
        for(var key in infos)
            basic = basic.replace(key,infos[key]);
        frame.innerHTML = basic;
        dialog = frame.firstElementChild;
        document.body.appendChild(dialog);
    }

    // 使用实例
    show_info({
        SourceImage: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494232648049&di=c9ed0728dcd2a938f7d192092167d687&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3Dd2a25cef858ba61edfeec827713597cc%2F6e73c60735fae6cd181ef14408b30f2443a70fc1.jpg',
        Name: '新恒结衣',
        Profession: "演员",
        Linkin: 'http://baike.baidu.com/link?url=XE3qgazl1WneJa5oH8j1fQNOdgWMVbseUHIEsUCJYn6p7r5Lt66LxjE_aWn0NyUWYAOtpX1GsXKvinz3VHsjV0D90vRVJ2GYDNDGZQZjFxHzMSK19Qlm_7mXmwglxx9y'
    })
</script>